import { FC, useState } from 'react';

import classnames from 'classnames';
import styles from './style.less';
import { Select } from 'antd';
const { Option } = Select;
import Image from '@/components/Image';
import ScrollModel from '@/components/ScrollModel';

import moreIcon0 from '@/assets/fxyj/icons/dushi0.png';
import moreIcon1 from '@/assets/fxyj/icons/dushi1.png';
import moreArrow from '@/assets/fxyj/more_arrow.png';
import moreArrow1 from '@/assets/fxyj/more_arrow1.png';

import { TabItem, MoreTab } from '@/interface/yj';

interface Iprops {
  dataSource: TabItem[];
  onTabChange?: (value: string) => void;
  moreData?: MoreTab[];
}

const WarningTab: FC<Iprops> = (props) => {
  const { dataSource, onTabChange, moreData } = props;

  const [currentSelected, setCurrentSelected] = useState<number>(0);
  const [focusMore, setFocusMore] = useState<boolean>(true);
  const [moreText, setMoreText] = useState<string>('');

  return (
    <div className={styles.tab_container}>
      {dataSource.map((item: TabItem, index: number) => (
        <div
          className={classnames(
            styles.tab_item,
            currentSelected === index && !moreText ? styles.actived : null,
          )}
          key={`${item.title}-${index}`}
          onClick={() => {
            onTabChange && onTabChange(item.title);
            setCurrentSelected(index);
            setMoreText('');
          }}
        >
          <Image
            src={
              currentSelected === index && !moreText
                ? item.selectedIcon
                : item.icon
            }
          ></Image>
          <span
            style={{
              fontSize: item.title.length > 9 ? 12 : 18,
            }}
          >
            {item.title}
          </span>
        </div>
      ))}
      {moreData && moreData.length > 0 ? (
        <div
          className={classnames(
            styles.tab_item,
            styles.more_select,
            moreText ? styles.actived : null,
          )}
        >
          <Image
            src={moreText ? moreIcon1 : moreIcon0}
            className={styles.more_icon}
          ></Image>
          <Image
            src={moreText ? moreArrow1 : moreArrow}
            className={styles.more_arrow}
          ></Image>
          <Select
            placeholder="更多"
            className={classnames(styles.more_select, 'resetSpecialSelect')}
            value={moreText ? moreText : undefined}
            bordered={false}
            dropdownClassName={styles.more_options}
            showArrow={false}
            onChange={(v: string) => {
              onTabChange && onTabChange(v);
              setMoreText(v);
            }}
          >
            {moreData.map((row: MoreTab, i: number) => (
              <Option
                id="resetSpecialOption"
                className={styles.more_option_item}
                value={row.title}
                key={`${row.title}-${i}`}
              >
                {row.title}
              </Option>
            ))}
          </Select>
        </div>
      ) : null}
    </div>
  );
};
export default WarningTab;
